<template>
	<view class="content">
		<view class="header"><image src="/static/login/logo.png"></image></view>
		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/login/1.png"></image>
				<input class="biaoti" v-model="account" type="number" maxlength="11" placeholder="输入手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/login/2.png"></image>
				<input
					class="biaoti"
					v-model="password"
					type="text"
					maxlength="32"
					placeholder="输入密码"
					password="true"
				/>
			</view>
		</view>
		<view class="dlbutton" hover-class="dlbutton-hover" @click="bindLogin">
			<view v-if="requestLoading"><u-loading mode="circle"></u-loading></view>
			<text v-else>登录</text>
		</view>
		<view class="xieyi">
			<navigator url="/" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="/pages/login/reg/index" open-type="navigate">注册账户</navigator>
		</view>
		<view class="oauth-row" v-if="hasProvider" v-bind:style="{ top: positionTop + 'px' }">
			<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
				<image :src="provider.image" @tap="oauth(provider.value)"></image>
			</view>
		</view>
	</view>
</template>

<script>
import md5Libs from 'uview-ui/libs/function/md5';
import { login } from '@/api/auth.js';
export default {
	onReady() {
		this.initPosition();
		// 加载第三方oauth
		// this.initProvider()
	},
	data() {
		return {
			requestLoading: false,
			account: '',
			password: '',
			providerList: [], //第三方oauthlist
			hasProvider: false, //是否有第三方授权
			positionTop: 0
		};
	},
	onLoad(option) {
		if (option.mobile) {
			this.account = option.mobile;
		}
	},
	methods: {
		initProvider() {
			const filters = ['weixin', 'qq', 'sinaweibo'];
			uni.getProvider({
				service: 'oauth',
				success: res => {
					console.log(res.provider);
					if (res.provider && res.provider.length) {
						for (let i = 0; i < res.provider.length; i++) {
							if (~filters.indexOf(res.provider[i])) {
								this.providerList.push({
									value: res.provider[i],
									image: '/static/img/' + res.provider[i] + '.png'
								});
							}
						}
						this.hasProvider = true;
					}
				},
				fail: err => {
					console.error('获取服务供应商失败：' + JSON.stringify(err));
				}
			});
		},
		initPosition() {
			/**
			 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
			 * 反向使用 top 进行定位，可以避免此问题。
			 */
			this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
		},
		bindLogin() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 */
			if (!this.$u.test.mobile(this.account)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				});
				return;
			}
			if (this.password.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '请输入密码'
				});
				return;
			}
			/**
			 * 请求手机号登录接口
			 */
			const param = {
				phoneNumber: this.account,
				pwd: this.password
			};
			this.requestLoading = true;
			login(param)
				.then(res => {
					if (res.code == 200) {
						uni.setStorageSync('lifeData', res.data.token);
						console.log(uni.getStorageSync('lifeData'));
						this.requestLoading = false;
						this.$u.vuex('vuex_hasLogin', true);
						this.toMain();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
				.catch(res => {
					this.requestLoading = false;
					uni.showToast({
						title: '服务异常',
						icon: 'none',
						duration: 2000
					});
				});
		},
		oauth(value) {
			// oauth授权登录
			uni.login({
				provider: value,
				success: res => {
					uni.getUserInfo({
						provider: value,
						success: infoRes => {
							/**
							 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
							 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
							 */
							this.toMain(infoRes.userInfo.nickName);
						}
					});
				},
				fail: err => {
					console.error('授权登录失败：' + JSON.stringify(err));
				}
			});
		},
		toMain() {
			//去首屏页面
			/**
			 * 强制登录时使用reLaunch方式跳转过来
			 * 返回首页也使用reLaunch方式
			 */
			if (this.vuex_forcedLogin) {
				uni.reLaunch({
					url: '/pages/home/index'
				});
			} else {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	margin-top: var(--status-bar-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header {
	width: 161rpx;
	height: 161rpx;
	background: rgba(63, 205, 235, 1);
	box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
	border-radius: 50%;
	margin-top: 30rpx;
	margin-left: auto;
	margin-right: auto;
}

.header image {
	width: 161rpx;
	height: 161rpx;
	border-radius: 50%;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;
}

.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	color: #333333;
	border-bottom: 1rpx solid rgba(230, 230, 230, 1);
}

.list-call .img {
	width: 40rpx;
	height: 40rpx;
}

.list-call .biaoti {
	height: 70rpx;
	flex: 1;
	text-align: left;
	font-size: 32rpx;
	line-height: 32rpx;
	margin-left: 16rpx;
}

.dlbutton {
	color: #ffffff;
	font-size: 34rpx;
	width: 470rpx;
	height: 100rpx;
	background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
	box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100rpx;
}

.dlbutton-hover {
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
}

.xieyi {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	margin-top: 80rpx;
	color: #ffa800;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}

.xieyi text {
	font-size: 24rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
}

.oauth-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.oauth-image {
	width: 100rpx;
	height: 100rpx;
	border: 1rpx solid #dddddd;
	border-radius: 100rpx;
	margin: 0 40rpx;
	background-color: #ffffff;
}

.oauth-image image {
	width: 60rpx;
	height: 60rpx;
	margin: 20rpx;
}
</style>
